.edit-template {
  .template-name {
    display: flex;
    width: 100%;
    height: 92rpx;
    padding: 24rpx 32rpx;
    box-shadow: inset 0 -2rpx 0 #EBEDF0;
    .txt {
      margin-right: 32rpx;
      line-height: 44rpx;
      font-size: 32rpx;
      color: $n8Color;
      font-weight: 500;
    }
    .input-view {
      flex: auto;
      font-size: 32rpx;
      color: $n8Color;
    }
  }
  .create-button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 128rpx;
    margin: 16rpx 0 32rpx;
    .button {
      width: 250rpx;
      padding: 12rpx 0;
      border: 2rpx solid $themeColor;
      border-radius: 32rpx;
      color: $themeColor;
      font-size: 28rpx;
      line-height: 40rpx;
      text-align: center;
    }
  }
  .scroll-wrap {
    width: 100%;
    height: calc(100% - 368rpx);
    .icon-arrow_right {
      margin-left: 24rpx;
      font-size: 48rpx;
      color: #C8C9CC;
    }
    .icon-close_circle_fill {
      margin-left: 20rpx;
      font-size: 48rpx;
      color: #C8C9CC;
    }
  }
  // 运费规则区域
  .wrap1{
    padding: 8rpx 32rpx 0;
  }
  .wrap1-item {
    position: relative;
    width: 100%;
    //padding: 0 32rpx;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    background-color: $n1Color;
    .area-content {
      display: flex;
      align-items: center;
      padding: 24rpx 32rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      box-shadow: inset 0 -2rpx 0 #EBEDF0;
      color: $n8Color;
    }
    .area {
      flex: 1;
      font-weight: 500;
    }
    .rule-content {
      display: flex;
      padding: 24rpx 32rpx;
    }
    .rule-txt {
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n8Color;
    }
    .rule-detail {
      flex: 1;
      margin-left: 24rpx;
      text-align: right;
      color: $n6Color;
    }
    .close-icon {
      position: absolute;
      right: -8rpx;
      top: -8rpx;
      font-size: 40rpx;
      z-index: 8;
      color: rgba(0, 0, 0, 0.3);
    }
  }
  // 不发货地区
  .wrap2 {
    padding: 0 32rpx;
    .bottom {
      height: 88rpx;
      line-height: 88rpx;
      //padding: 0 32rpx;
      font-size: 28rpx;
      color: $n9Color;
    }
  }
  .wrap2-item {
    width: 100%;
    //margin-bottom: 24rpx;
    //padding: 0 32rpx;
    border-radius: 16rpx;
    background-color: $n1Color;
    .header {
      height: 88rpx;
      padding: 0 32rpx;
      font-size: 28rpx;
      line-height: 88rpx;
      box-shadow: inset 0 -2rpx 0 #EBEDF0;
      color: $n8Color;
    }
    .center {
      display: flex;
      padding: 28rpx 24rpx;
      //box-shadow: inset 0 -2rpx 0 #EBEDF0;
    }
    .txt {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      color: $n8Color;
    }
  }
  .footer-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    .button {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 96rpx;
      font-size: 32rpx;
      border-radius: 0;
      color: #FFFFFF;
      background-color: $themeColor;
    }
  }

  .area-popup,
  .setting-popup {
    height: 100%;
    .header {
      position: relative;
      width: 100%;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
    }
    .txt {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .icon-close {
      position: absolute;
      right: 24rpx;
      top: 0;
      font-size: 40rpx;
      color: #C8C9CC;;
    }
  }
  .area-collapse {
    width: 100%;
    height: calc(100% - 192rpx);
    //padding: 0 0 24rpx;
    .collapse-item {
      //position: sticky;
      //top: 0;
      //left: 0;
      width: 100%;
      background-color: #FFFFFF;
    }
    .p-item {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 0 0 32rpx;
    }
    .p-lt {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 24rpx 0;
    }
    .p-checkbox {
      font-size: 40rpx;
    }
    .p-checkbox-empty {
      color: $n6Color;
    }
    .icon-checked {
      color: $themeColor;
    }
    .p-name {
      flex: 1;
      margin: 0 24rpx 0 16rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .p-rt {
      width: 64rpx;
      height: 90rpx;
      padding-right: 32rpx;
      line-height: 90rpx;
      transition: all 0.2s;
    }
    .icon-arrow_right {
      width: 100%;
      height: 100%;
      font-size: 32rpx;
      color: #C8C9CC;
      transition: all 0.2s;
    }
    .c-list-body {
      padding: 0 32rpx 0 92rpx;
      background-color: $n1Color;
      transition: all 0.2s;
      overflow: hidden;
    }
    .c-list {
      overflow: hidden;
    }
    .c-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
    }
    .c-checkbox {
      font-size: 32rpx;
    }
    .c-checked-empty {
      color: $n6Color;
    }
    //.c-checked {
    //  color: $themeColor;
    //}
    .c-name {
      margin-left: 16rpx;
      font-size: 28rpx;
      color: $n8Color;
    }
  }
  .icon-arrow_right_active {
    transform: rotate(-90deg);
    transform-origin: center center;
    transition: all 0.2s;
  }
  .area-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100rpx;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    .lf-btn {
      display: flex;
      //justify-content: center;
      align-items: center;
      width: 250rpx;
      padding: 0 0 0 32rpx;
      border-radius: 0;
      font-size: 28rpx;
      color: $n8Color;
    }
    .icon {
      font-size: 40rpx;
      margin-right: 8rpx;
    }
    .icon-checkbox {
      color: $n6Color;
    }
    .icon-reboot_color,
    .icon-checkbox_fill {
      color: $themeColor;
    }
    .rt-btn {
      flex: 1;
      line-height: 100rpx;
      border-radius: 0;
      font-size: 32rpx;
      color: #ffffff;
      background-color: $themeColor;
      text-align: center;
    }
  }
  .freight-type {
    display: flex;
    width: 100%;
    height: 108rpx;
    box-shadow: inset 0 -2rpx 0 #EBEDF0;
    .icon-checkbox {
      margin-right: 16rpx;
      font-size: 32rpx;
      color: $n6Color;
    }
    .icon-checkbox_fill {
      margin-right: 16rpx;
      font-size: 32rpx;
      color: $themeColor;
    }
    .txt {
      font-size: 32rpx;
      font-weight: 500;
      color: $n8Color;
    }
  }
  .type-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .scroll-setting {
    width: 100%;
    height: calc(100% - 300rpx);
    padding-bottom: 12rpx;
    background-color: $n1Color;
  }
  .type0-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 112rpx;
    padding: 0 32rpx;
    background-color: #FFFFFF;
  }
  .type1-wrap {
    background-color: #FFFFFF;
  }
  .type1-item {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
  }
  .type1-txt {
    margin: 0 16rpx 0 32rpx;
    font-size: 24rpx;
    color: $n8Color;
  }
  .input-wrap {
    display: flex;
    align-items: center;
    width: 200rpx;
    height: 64rpx;
    padding: 0 16rpx;
    border-radius: 8rpx;
    border: 2rpx solid $n4Color;
    .input {
      height: 100%;
      margin-right: 4rpx;
      line-height: 64rpx;
    }
    .input-txt {
      font-size: 28rpx;
      color: $n8Color;
    }
  }
  .spec-req-wrap {
    margin-top: 24rpx;
    background-color: #FFFFFF;
    .switch-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 32rpx;
      box-shadow: inset 0 -2rpx 0 $n3Color;
    }
    .switch-txt {
      font-size: 32rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .free-item {
      display: flex;
      align-items: center;
      padding: 24rpx 32rpx;
    }
    .icon-checkbox {
      margin-right: 32rpx;
      font-size: 32rpx;
      color: $n6Color;
    }
    .icon-checkbox_fill {
      margin-right: 32rpx;
      font-size: 32rpx;
      color: $themeColor;
    }
    .txt {
      font-size: 28rpx;
      color: $n8Color;
    }
    .input-wrap {
      margin: 0 16rpx;
    }
  }
  .disabled-checkbox {
    color: #F1A19A;
  }
  .setting-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    .button {
      width: 100%;
      height: 100%;
      line-height: 100rpx;
      border-radius: 0;
      color: #ffffff;
      font-size: 32rpx;
      background-color: $themeColor;
    }
  }
  .cancel-modal {
    padding: 48rpx 0 0;
    .modal-cancel-content {
      padding: 0 48rpx 48rpx;
      margin-top: 16rpx;
      color: $n6Color;
      font-size: 32rpx;
      line-height: 44rpx;
      text-align: center;
    }
    .modal-button-wrap {
      display: flex;
      line-height: 96rpx;
      font-size: 32rpx;
    }
    .button {
      width: 50%;
      text-align: center;
      font-weight: 500;
      box-shadow: 2rpx -2rpx 2rpx #ebedf0;
      color: $n6Color;
    }
  }
}